<template>
  <div class='spam_content flexBox'>
    <!-- 查询条件 -->
    <div class='toolbar'>
      <el-form :inline='true' :model='selectParams' class='demo-form-inline' size='small'>
        <el-form-item label='粒度'>
          <el-select v-model='selectParams.timeLine' placeholder='请选择' style='width:100%'>
            <el-option
              v-for='item in options'
              :key='item.value'
              :label='item.label'
              :value='item.value'
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label='端口类型'>
          <el-select v-model='selectParams.type' placeholder='请选择' @change="changeParamsType">
            <el-option
              v-for='item in typeOptions'
              :key='item.value'
              :label='item.label'
              :value='item.value'
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label='归属单位'>
          <el-select v-model='selectParams.dept' placeholder='请选择'>
            <el-option
              v-for='item in options'
              :key='item.value'
              :label='item.label'
              :value='item.value'
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label>
          <kt-button
            icon='fa fa-search'
            :label="$t('action.search')"
            perms='sys:menu:save'
            type='primary'
            @click='initData'
          />
        </el-form-item>
      </el-form>
    </div>
    <!-- 图表 -->
    <Chart />
    <!-- 列表 -->
    <Table 
      :pageNo="selectParams.pageNo"
      :pageSize="selectParams.pageSize"
      :totalPage="totalPage"
      :btnState="btnState"
      @hanbleTableChange="hanbleTableChange"
      @sizeChangeHandle="sizeChangeHandle"
      @exportTable="exportTable"/>
  </div>
</template>

<script>
import KtButton from '@/views/Core/KtButton'
import Chart from './components/chart'
import Table from './components/table'
import { getSpamData } from '@/api/spam'
export default {
  components: {
    KtButton,
    Chart,
    Table
  },
  data() {
    return {
      options: [
        {
          value: '选项1',
          label: '参数1'
        },
        {
          value: '选项2',
          label: '参树2'
        },
        {
          value: '选项3',
          label: '参数3'
        },
        {
          value: '选项4',
          label: '参数4'
        },
        {
          value: '选项5',
          label: '参数5'
        }
      ],
      typeOptions: [
        {
          value: '1',
          label: '时间'
        },
        {
          value: '2',
          label: '类型'
        }
      ],
      selectParams: {
        timeLine: '',
        type: '1',
        dept: '',
        pageNo: 1,
        pageSize: 5
      },
      totalPage: 4,
      btnState: 1
    }
  },
  created() {
  },
  mounted() {
  },
  methods: {
    initData() {
    },
    // 健康类型切换
    hanbleTableChange(val) {
      console.log(val)
    },
    changeParamsType(value) {
      // 类型切换 -- 图表横坐标更新
      // this.spamChart()
    },
    // 每页数量改变
    sizeChangeHandle(val) {
      console.log(val)
    },
    // 页码切换
    currentChangeHandle(val) {
      console.log(val)
    },
    // 导出列表
    exportTable() {
      console.log('导出列表')
    }
  }
};
</script>

<style lang='scss' scoped>
.flexBox {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}
.spam_content {
  width: 100%;
  height: 100%;
}
.toolbar {
  width: 100%;
  height: 6%;
  text-align: left;
  vertical-align: middle;
}
.chartbar {
  width: 100%;
  height: 33%;
  background: cornsilk;
}
</style>